// src\components\Item\index.jsx
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import './index.css'
export default class Item extends Component {
    state = { mouse: false }
    static propTypes = {
        updateTodo:PropTypes.func.isRequired,
        deleteTodo:PropTypes.func.isRequired
    }
    handleMouse = (e) => {
        // 鼠标移入就是true，移出为false
        return () => {
            // console.log(e);
            this.setState({ mouse: e });
        }
    }
    // 绑定选择框的改变事件
    handleCheck = (id) => {
        return (event) => {
            // console.log("Item-------",event.target.checked, id);
            this.props.updateTodo(id, event.target.checked)
        }
    }
    // 调用删除事件
    handleDelete = (id) => {
        return () => {
            console.log("Item-delete-----", id);
            if (window.confirm('是否确认删除？')) {
                this.props.deleteTodo(id);
            }
        }
    }
    render() {
        const { id, title, done } = this.props;
        const { mouse } = this.state;
        return (
            <div style={{ background: mouse ? "#ddd" : "white" }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                <li>
                    <label>
                        {/* defaultChecked 只能指定一次，而checked以最后一次状态为主，并且要配合onChange使用  */}
                        <input type='checkbox' checked={done} onChange={this.handleCheck(id)}></input>
                        <span>{title}</span>
                    </label>
                    <button className='btn btn-danger' onClick={this.handleDelete(id)} style={{ display: mouse ? "" : "none" }}>删除</button>
                </li>
            </div>
        )
    }
}
